<template>
  <div class="content">
    <div class="left">
      <!-- teb栏 -->
      <el-tabs v-model="activeName">
        <el-tab-pane label="博客之星" name="first">
          <el-table
            max-height="500px"
            :row-key="getRowKeys"
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 80%; text-align: center; margin: 0 auto"
            @selection-change="handleSelectionChange"
          >
            <!-- 收缩框  -->
            <el-table-column fixed type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="发布时间">
                    <span>{{ timeDetal(props.row.article_createtime) }}</span>
                  </el-form-item>
                  <el-form-item label="文章id">
                    <span>{{ props.row.article_id }}</span>
                  </el-form-item>
                  <el-form-item label="用户">
                    <span>{{ props.row.username }}</span>
                  </el-form-item>
                  <el-form-item label="文章标题">
                    <span>{{ props.row.article_title }}</span>
                  </el-form-item>
                  <el-form-item label="文章内容">
                    <span v-html="props.row.article_content">}</span>
                  </el-form-item>
                  <el-form-item label="文章封面">
                    <span v-if="props.row.article_picture">
                      <img
                        :src="props.row.article_picture"
                        style="width: 100px; height: 100px"
                    /></span>
                    <span v-if="!props.row.article_picture"> 无封面 </span>
                  </el-form-item>
                  <el-form-item label="文章类型">
                    <span v-if="props.row.article_public_status == 1"
                      >原创</span
                    >
                    <span v-if="props.row.article_public_status == 0"
                      >转载</span
                    >
                  </el-form-item>
                  <el-form-item label="摘要">
                    <span>{{ props.row.article_summary }}</span>
                  </el-form-item>

                  <el-form-item label="发布形式">
                    <span v-if="props.row.original_or_reprint == 1">公开</span>
                    <span v-if="props.row.original_or_reprint == 0">私密</span>
                  </el-form-item>
                  <el-form-item>
                    <span style="margin-right: 20px"
                      >点赞量:{{ props.row.article_like_count }}</span
                    >
                    <span style="margin-right: 20px"
                      >浏览量:{{ props.row.article_view_count }}</span
                    >
                    <span style="margin-right: 20px"
                      >评论量:{{ props.row.article_comment_count }}</span
                    >
                    <span style="margin-right: 20px"
                      >收藏量:{{ props.row.article_collection_count }}</span
                    >
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <!-- show-overflow-tooltip当内容过长被隐藏时显示  -->

            <el-table-column label="发布时间" width="200" show-overflow-tooltip>
              <template slot-scope="scope">{{
                timeDetal(scope.row.article_createtime)
              }}</template>
            </el-table-column>
            <el-table-column
              prop="article_id"
              label="文章id"
              width="200"
              sortable
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="username"
              label="用户"
              width="200"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="article_title"
              label="文章标题"
              width="200"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="article_summary"
              label="摘要"
              width="200"
              show-overflow-tooltip
            >
            </el-table-column>

            <!-- 操作 -->
            <el-table-column fixed="right" label="评选" width="100">
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.disabled == false"
                  type="success"
                  icon="el-icon-check"
                  circle
                  @click="ExcellentBlog(scope.row)"
                  :disabled="scope.row.disabled"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-empty description="没有搜到哟宝~" v-if="blognum"></el-empty>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { mixin } from "../../mixin";
export default {
  name: "StarBlogsListChoose",
  mixins: [mixin],
  data() {
    return {
      dayTime: "", //今日时间
      blognum: false, //为空时显示空状态
      page_hide: true, //页面空状态时隐藏
      artic: [], // 博客数据
      activeName: "first", //导航栏默认先展示博客信息
      excellentBlogList: {}, //博客之星
      tableData: [], //表格数据
      multipleSelection: [], //存入的是选择后的数据
    };
  },
  methods: {
    // 选择博客之星
    ExcellentBlog(value) {
      // 提示信息element
      const h = this.$createElement;
      this.$msgbox({
        title: "消息",
        message: h("p", null, [h("span", null, "确定评选此篇博客为博客之星 ")]),
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            // 连接审核接口
            value.disabled = true;
            this.$http({
              method: "post",
              url: "jurisdiction/selectTheOnlyBlogStar",
              params: {
                article_id: value.article_id,
              },
            }).then((response) => {
              console.log("queding", response);
              if (response.status == 200) {
                value.disabled = true;
                this.$message({
                  type: "success",
                  message: "评选成功",
                });
              } else {
                this.$message({
                  type: "info",
                  message: "评选失败",
                });
              }
            });
            //弹框element写法
            // 点击确定之后500毫秒消失
            setTimeout(() => {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 300);
            }, 500);
          } else {
            done();
          }
        },
      }).then(() => {
        // 重新渲染页面
        this.PageRendering();
      });
    },

    // element表格固定写法
    toggleSelection(rows) {
      if (rows) {
        // 全选
        this.$refs.multipleTable.toggleAllSelection();
      } else {
        // 取消全选
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      // 将选择的数据存入multipleSelection中
      this.multipleSelection = val;
      // 将multipleSelection中的article_id存入到allapprovedData中
      this.allapprovedData = [];
      for (var i = 0; i < this.multipleSelection.length; i++) {
        this.allapprovedData.push(this.multipleSelection[i].article_id);
      }
    },
    // element表格固定写法
    getRowKeys(row) {
      return row.article_id;
    },
    // 页面渲染
    PageRendering() {
      this.$http({
        method: "post",
        url: "jurisdiction/showBlogStaring",
      }).then(({ data }) => {
        console.log("页面渲染", data);
        this.tableData = [];
        if (data.flag) {
          // 将后端传过来的数据存入tableData中
          this.tableData = data.data.article;
          // 将username传入到tableData中
          for (var i = 0; i < this.tableData.length; i++) {
            this.$set(this.tableData[i], "disabled", false);
            this.$set(
              this.tableData[i],
              "username",
              data.data.user[i].username
            );
          }
        }
      });
    },
  },
  mounted() {
    this.PageRendering();
  },
};
</script>


<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 内容展示区 */
.content {
  padding: 30px;
  margin-left: 5%;
  width: 100%;
}
/* 左边搜索内容 */
.left {
  padding: 30px;
  width: 90%;
  margin-top: 50px;
  margin-right: 20px;
  box-shadow: 0 0 10px 0px rgb(219, 218, 218);
}
.left /deep/.el-tabs__item {
  font-size: 20px;
}
.left /deep/ .el-tabs__active-bar {
  width: 40px;
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-left: 110px;
  margin-bottom: 10px;
  width: 50%;
}

.content /deep/.el-icon-arrow-right:before {
  position: absolute;
  font-size: 20px;
  top: -7px;
  left: -10px;
}
.content {
  text-align: center;
}

.content /deep/ .el-form--inline .el-form-item__label {
  color: #99a9bf;
}
</style>